<template>
    <view style="padding:1rem;width: 100%;box-sizing: border-box;">
        <!-- <uni-row style="">
            <h3>商品封面图</h3>
        </uni-row>
        <uni-row>

        </uni-row> -->
        <uni-row style="margin-top:2rem">
            <uni-forms ref="uniForm" label-width="80px" v-model="form" :rules="rules">
                <uni-forms-item label="图片" name="image">
                    <uni-file-picker ref="files" v-model="image_value" fileMediatype="image" mode="grid" :limit="1"
                        @select="select" @progress="progress" @success="success" @fail="fail" :autoUpload="false" />
                </uni-forms-item>
                <uni-forms-item label="名称" name="name" required>
                    <uni-easyinput type="text" v-model="form.name" placeholder="请输入名称" />
                </uni-forms-item>
                <uni-forms-item label="售价" name="price" required>
                    <view style="display: flex;align-items: center;gap:1rem">
                        <uni-easyinput type="number" v-model="priceNumber" :clearable="false" placeholder="请输入售价" />
                        <uni-number-box :min="0" :max="9999" v-model="form.price" />
                    </view>
                </uni-forms-item>
                <uni-forms-item label="选择菜单" name="menu_id" required>
                    <unicloud-db ref="udb" v-slot:default="{ data }" collection="menu" orderby="created asc"
                        where="delete != true">
                        <uni-data-select v-model="form.menu_id"
                            :localdata="data.map((item) => { return { value: item.id, text: item.name } })">
                        </uni-data-select>
                    </unicloud-db>
                </uni-forms-item>
                <uni-forms-item label="描述" name="description">
                    <uni-easyinput type="textarea" v-model="form.description" placeholder="请添加描述" />
                </uni-forms-item>
            </uni-forms>
        </uni-row>
        <uni-row>
            <button type="primary" class="uni-button" @click="submit" style="margin-bottom: 1rem">保存</button>
            <button type="error" class="uni-button" @click="cancel">取消</button>
        </uni-row>
    </view>
</template>

<script>
export default {
    data() {
        return {
            valiFormData: {
                name: '',
                age: '',
                introduction: '',
            },

            rules: {
                name: {
                    rules: [{
                        required: true,
                        errorMessage: '姓名不能为空',

                    }, {
                        type: 'string',
                        max: 12,
                        message: '请限制在12字以内',
                        trigger: ['blur', 'change']
                    }]
                },
                price: {
                    rules: [{
                        type: 'number',
                        max: 999999,
                        min: 0,
                        message: '范围0-999999',
                        trigger: ['blur', 'change']
                    }]
                },
                menu_id: {
                    rules: [{
                        required: true,
                        errorMessage: '请选择菜单',
                        trigger: ['blur', 'change']
                    }]
                }

            },
            menu_list: [],
            form: {
                name: '',
                description: '',
                price: 0,
                menu_id: null,
            },
            image_value: [],
            upload_error: '',
        }
    },
    methods: {
        async submit() {

            if (this.upload_error) {
                return uni.showToast({
                    icon: 'none',
                    title: this.upload_error
                })
            }
            try {
                const res = await this.$refs.uniForm.validate();
                uni.showLoading({
                    mask: true
                })
                const upload = await this.$refs.files.upload()
                const { errCode } = await this.db('good').add({
                    data: {
                        ...res, image: upload[0]?.url
                    },
                    toast: true
                })
                if (!errCode) {
                    setTimeout(() => {
                        uni.navigateTo({
                            url: 'index'
                        })
                    }, 1000);
                }
            } catch (error) {
                console.error(error)
        /*         uni.showToast({
                    icon: 'none',
                    title: error[0] ? error[0].errorMessage : error + '',
                }) */
                // handle error here
            } finally {
                uni.hideLoading();
            }
        },
        cancel() {
            uni.navigateBack()
        },
        // 获取上传状态
        select(e) {
            // console.log('选择文件：', e)
            e.tempFiles.some(item => {
                if (item.size >= 1024000) {
                    uni.showToast({
                        icon: 'none',
                        title: '图片不能大于1m，只有5G可以存'
                    })
                    this.upload_error = '图片过大，请重新上传'
                    return true
                }
            })

        },
        // 获取上传进度
        progress(e) {
            // console.log('上传进度：', e)

        },

        // 上传成功
        success(e) {
            // console.log('上传成功', e)
            this.form.image = e.path

        },

        // 上传失败
        fail(e) {
            // console.log('上传失败：', e)
        }
    },
    computed: {
        priceNumber: {
            get() {
                return +this.form.price
            },
            set(val) {
                this.form.price = +val
            }
        }
    },
}
</script>

<style scoped lang="less">
::v-deep {
    .u-upload__button {
        width: 6rem !important;
        height: 6rem !important;
    }

    .u-upload__wrap__preview__image {

        width: 6rem !important;
        height: 6rem !important;
    }

    .u-upload__deletable {
        width: 1rem !important;
        height: 1rem !important;

    }

    .u-form {
        width: 100%;
    }
}
</style>
